<template>
  <div :class="[cloudClass === 'bg2' ? 'with-cloud-bg2':'with-cloud-bg']">
    <div class="title-bar">{{ title }}</div>
    <div class="info-content">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'CloudCard',
  props: {
    title: {
      type: String,
      default: ''
    },
    cloudClass: {
      type: String,
      default: 'bg1'
    }
  },
}
</script>
<style lang="scss" scoped>
.with-cloud-bg {
  @include withBg("~@/assets/short_video_info_bg.png", px2rem(720px), px2rem(441px), center, top);
  width: 100%;
  height: px2rem(441px);
}
.with-cloud-bg2 {
  @include withBg("~@/assets/cloud_2.png", px2rem(686px), px2rem(378px), center, top);
  width: 100%;
  height: px2rem(378px);
  .title-bar {
    //padding-top:
  }
  .info-content {
    margin-top: px2rem(50px);
  }
}
.info-content {
  margin-top: px2rem(70px);
  margin-left: auto;
  margin-right: auto;
  width: px2rem(584px);
  height: px2rem(168px);
  font-size: px2rem(24px);
  color: $lightFontColor;
  letter-spacing: 0;
  text-align: justify;
  line-height: px2rem(42px);
}
</style>
